import React from 'react';
import classnames from 'classnames';
import { Props, State } from '../type';
import './index.less';
import _ from 'lodash';
import { parseTextValue } from '@/plugins/form/form-render/utils/detail-parser';

export class ColumnText extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  public render() {
    const cls = classnames('clearfix', 'column-wrap', 'column-in-detail');

    const labelStyle = { width: '' };

    let value = parseTextValue(this.props.value);
    if (value == 0) {
      value = value + '';
    }
    // 防止报错 将value转换成字符串再展示
    if (!_.isString(value) && value) {
      try {
        value = JSON.stringify(value);
      } catch (error) {
        console.log('columntext error', error);
      }
    }
    let parseValue = '';
    if (value && value.length > 45 && this.props.layout === 'detailtable') {
      parseValue = value.substr(0, 45) + '...';
    } else {
      parseValue = value;
    }
    const titleText = this.props.name?.replace(/（/g, '(')?.replace(/）/g, ')');

    // value为0时，是否显示 '0'
    const { isShowZero } = this.props;
    return (
      <div className={cls + ' ' + this.props.geakey?.split('-')[1]}>
        {this.props.name ? (
          <label
            className={'column-prefix'}
            style={labelStyle}
            title={titleText}
          >
            {titleText}
          </label>
        ) : ''}
        {this.props.children && (
          <div className="column-content">
            <div className="column-content-text">{this.props.children}</div>
          </div>
        )}

        {((value && value != 0) ||
          (isShowZero === true && value == 0)) && (
          <div className="column-content">
            <div className="column-content-text">
              {parseValue}
            </div>
          </div>
        )}
        {!this.props.children &&
          value == 0 &&
          isShowZero !== true &&
          '暂无'}
      </div>
    );
  }
}
